<template>
  <d2-container>
    <template slot="header">
      <el-form
        ref="queryForm"
        :model="queryForm"
        class="header-area"
        label-width="110px"
        style="height: auto"
      >
        <!-- 说明 -->
        <!-- 一行用一个row -->
        <!-- 每行由若干个col组成 -->
        <!-- 每行所有col的span值加起来，最大不超过24！ -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="调拨单编号" prop="orderNo">
              <el-input
                type="text"
                v-model="queryForm.orderNo"
                placeholder="请输入调拨单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调出仓库" prop="repositoryNameOut">
              <el-input
                type="text"
                v-model="queryForm.repositoryNameOut"
                placeholder="请输入调出仓库"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调入仓库" prop="repositoryNameIn">
              <el-input
                type="text"
                v-model="queryForm.repositoryNameIn"
                placeholder="请输入调入仓库"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核状态" prop="auditStatus">
              <el-select v-model="queryForm.auditStatus" placeholder="请选择" style="width: 100%">
                <el-option label="全部" value=""></el-option>
                <el-option label="未提交" value="0"></el-option>
                <el-option label="待审核" value="1"></el-option>
                <el-option label="审核通过" value="2"></el-option>
                <el-option label="审核不通过 " value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="调拨状态" prop="allocationStatus">
              <el-select v-model="queryForm.allocationStatus" placeholder="请选择" style="width: 100%">
                <el-option label="全部" value=""></el-option>
                <el-option label="未处理" value="0"></el-option>
                <el-option label="已确定" value="1"></el-option>
                <el-option label="已撤销" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品SPU" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入商品SPU"></el-input>
						</el-form-item>
          </el-col>
          <el-col :span="6">
						<el-form-item label="商品SKU" prop="productSkuName">
							<el-input type="text" v-model="queryForm.productSkuName" placeholder="请输入商品SKU"></el-input>
						</el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="search-submit">
              <el-button
                type="primary"
                size="medium"
                @click="submitForm('queryForm')"
                >查询</el-button>
              <el-button size="medium" @click="resetForm('queryForm')" >重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </template>
   <template>
      <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column type="index" fixed label="序号" width="50"></el-table-column>
          <el-table-column prop="orderNo" label="调拨单编号"></el-table-column>
          <el-table-column prop="applyReason" label="调拨原因"></el-table-column>
          <el-table-column
            prop="applyDate"
            label="调拨日期"
            :formatter="forDateApply" >
          </el-table-column>
          <el-table-column
            prop="shopNameOut"
            label="调出店铺" >
          </el-table-column>
          <el-table-column
            prop="repositoryNameOut"
            label="调出仓库" >
          </el-table-column>
          <el-table-column
            prop="stockNoOut"
            label="调出库存编码" >
          </el-table-column>
          <el-table-column
            prop="shopNameIn"
            label="调入店铺" >
          </el-table-column>
          <el-table-column
            prop="repositoryNameIn"
            label="调入仓库" >
          </el-table-column>
          <el-table-column
            prop="stockNoIn"
            label="调入库存编码" >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品SPU" >
          </el-table-column>
          <el-table-column
            prop="productSkuName"
            label="商品SKU" >
          </el-table-column>
			    <el-table-column prop="allocationQuantity" label="调拨数量"></el-table-column>
          <el-table-column prop="allocationUnitName" label="单位"> </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="审核状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus == 0">未提交</span>
              <span v-if="scope.row.auditStatus == 1">待审核</span>
              <span v-if="scope.row.auditStatus == 2">审核通过</span>
              <span v-if="scope.row.auditStatus == 3">审核不通过</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="allocationStatus"
            label="调拨状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.allocationStatus == 0">未处理</span>
              <span v-if="scope.row.allocationStatus == 1">已确定</span>
              <span v-if="scope.row.allocationStatus == 2">已撤销</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间" :formatter="forDateCreate">
          </el-table-column>
        </el-table>
    </template>
    <template slot="footer">
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<script>
import {getAllocationOrderDetailPage} from '@api/allocation/allocation'
import dayjs from "dayjs";
export default {
  name: 'allocation-order-detail-list',

   data () {
    return {
      date: [],
      queryForm: {
        orderNo: null,
        repositoryNameIn: null,
        repositoryNameOut: null,
        productName: null,
        productSkuName: null,
        auditStatus: '',
        allocationStatus: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
 
  mounted () {
    this.fetchData()
  },
  methods: {
    resetPage() {
      this.currentPage = 1;
      this.pageSize = 10;
      this.total = 0;
    },
    submitForm(formName) {
      this.resetPage();
      this.fetchData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.resetPage();
      this.fetchData();
    },
    fetchData () {
      this.loading = true
      getAllocationOrderDetailPage({
        orderNo: this.queryForm.orderNo,
        repositoryNameIn: this.queryForm.repositoryNameIn,
        repositoryNameOut: this.queryForm.repositoryNameOut,
        productName: this.queryForm.productName,
        productSkuName: this.queryForm.productSkuName,
        auditStatus: this.queryForm.auditStatus,
        allocationStatus: this.queryForm.allocationStatus,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.content;
        this.total = res.data.total;
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    forDateApply(row, column) {
      return row.applyDate == null ? "": dayjs(row.applyDate).format("YYYY-MM-DD");
    },
    forDateCreate(row, column) {
      return row.createTime == null ? "": dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss");
    }
  }
}
</script>
